<!--
 * @Description: 
 * @Date: 2025-09-02 16:02:38
 * @LastEditTime: 2025-09-02 17:01:57
-->

<template>
    <van-nav-bar title="策略引擎" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="min-h-screen " style=" background-color: #f5f7fa;
            color: #333;">
        <div class="container mx-auto px-4 py-4">
           

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 老年客户策略 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="flex items-start">
                        <div class="icon-container bg-blue-100 text-blue-600">
                            <i class="fa fa-lg  fa-bookmark"></i>
                        </div>
                        <div class="text-left">
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">老年客户</h3>
                            <p class="text-gray-600">机龄大于24个月</p>
                        </div>
                    </div>
                </div>

                <!-- 无宽带客户策略 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="flex items-start">
                        <div class="icon-container bg-purple-100 text-purple-600">
                            <i class="fa fa-lg  fa-bookmark"></i>
                        </div>
                        <div class="text-left">
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">无宽带客户</h3>
                            <p class="text-gray-600">当前未开通宽带服务</p>
                        </div>
                    </div>
                </div>

                <!-- 欠费下降趋势策略 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="flex items-start">
                        <div class="icon-container bg-green-100 text-green-600">
                            <i class="fa fa-lg  fa-bookmark"></i>
                        </div>
                        <div class="text-left">
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">欠费下降趋势</h3>
                            <p class="text-gray-600">存在欠费金额持续减少的趋势</p>
                        </div>
                    </div>
                </div>

                <!-- 无家庭账户策略 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="flex items-start">
                        <div class="icon-container bg-orange-100 text-orange-600">
                            <i class="fa fa-lg  fa-bookmark"></i>
                        </div>
                        <div class="text-left">
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">无家庭账户</h3>
                            <p class="text-gray-600">未开通家庭共享账户服务</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => {
    router.push("/main");
};

</script>
<style scoped>
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.icon-container {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-right: 12px;
}
</style>